<template>
	<div class="flexcenter paddingtb">
		<div class="max_width mainpadding ffffff">
			<!-- 课程详情 -->
			<div class="text_f color_zero">课程信息确认</div>
			<div class="flex margin_top1">
				<img class="imgBox margin_right2" :src="info.image_text" alt="">
				<div class="flex1 word_wrap justify_between_column">
					<div class="text_bs color_zero">{{info.name}}</div>
					<div class="text_f color_six lianghang">{{info.teacher.username}}</div>
					<div class="color_red">
						<span class="priceText">￥</span>
						<span class="price">{{info.price}}</span>
					</div>
				</div>
			</div>
			<!-- 支付 -->
			<div class="margin_top paddingtb line_top flexbetween">
				<div>
					<!-- <div class="flexleft">
						<div class="text_d color_zero margin_right3">支付方式</div>
						<div class="flexleft">
							<img class="weixinImg margin_right1" src="../../static/image/home/weixinPay.png" alt="">
							<div class="text_d color_zero">微信支付</div>
						</div>
					</div> -->
					<!-- 支付方式 -->
					<div class="flexleft">
						<div class="text_d color_zero margin_right2">支付方式</div>
						<div class="pointer" :class="pay_type==1?'wayActive margin_right2':'way margin_right2'"
							@click="pay_type=1">
							<img class="weixinImg" src="../../static/image/home/weixinPay.png" alt="">
							<div class="text_d color_zero">微信支付</div>
						</div>
						<div class="pointer" :class="pay_type==3?'wayActive margin_right2':'way margin_right2'"
							@click="pay_type=3">
							<img class="balanceImg" src="../../static/image/home/balance.png" alt="">
							<div class="text_d color_zero">余额支付</div>
						</div>
					</div>
					<div class="flexleft margin_top">
						<div class="text_d color_zero margin_right3">支付金额</div>
						<div class="text_d color_red">￥{{createOrderInfo.pay_price}}</div>
					</div>
				</div>
				<el-button type="primary" style="background-color: #3478F5;" @click="submit">确认支付</el-button>
			</div>
		</div>
		<!-- 订单支付弹窗 -->
		<el-dialog title="订单支付" :visible.sync="dialogVisible" width="25%" center top="30vh" :before-close="handleClose">
			<div class="flexcenter">
				<div class="codeImg">
					<img src="../../static/image/course.png" alt="">
				</div>
			</div>
			<div class="flexcenter margin_top1">
				<img class="weixinImg margin_right1" src="../../static/image/home/weixinPay.png" alt="">
			</div>
			<div class="textcenter text_f color_zero margin_top1">微信扫码，支付10.60元</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getCourseInfo, getCreateOrder, getPayOrder } from "@/API/home"
	export default {
		data() {
			return {
				dialogVisible: false,
				info: {},
				pay_type: 1,
				createOrderInfo: {}
			}
		},
		created() {
			this.getInfo(this.$route.query.id)
			// this.getInfo(this.$route.query.id)
		},
		methods: {
			async getInfo(id) {
				let res = await getCourseInfo({
					id
				})
				this.info = res.data.data.info
				let data = await getCreateOrder({ education_lesson_id: id })
				this.createOrderInfo = data.data.data
			},
			async pay() {
				let res = await getPayOrder({
					order_id: this.createOrderInfo.order_id,//课程订单id
					platform: "PC",//平台:H5=H5,wxMiniProgram=微信小程序,App=App,PC=PC
					pay_type: this.pay_type,//支付方式:1=微信支付,2=支付宝,3=余额
				})
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.$router.go(-1)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			submit() { //确认支付
				if (this.pay_type == 1) {
					this.dialogVisible = true
				} else {
					this.pay()
				}
			},
			handleClose(done) {
				done();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.way {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #EAEAEA;
	}

	.wayActive {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
	}

	.imgBox {
		width: 387px;
		height: 215px;
		min-width: 387px;
		/* // background: rgba(0,0,0,0.6); */
		border-radius: 8px 8px 8px 8px;
	}

	.priceText {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.price {
		font-size: 36px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.weixinImg {
		width: 18px;
		height: 16px;
	}

	::v-deep .el-dialog {
		border-radius: 16px;
	}

	::v-deep .el-dialog__title {
		font-size: 16px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.codeImg {
		width: 135px;
		height: 134px;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>